<!--
 * @Author: jlzm
 * @Date: 2020-06-19 16:01:38
 * @LastEditors: jlzm
 * @LastEditTime: 2020-06-23 16:29:31
 * @FilePath: \MPShop\components\goods\uniGoodsListRow.vue
--> 
<template>
	<view class="uni-goods-list-row" :id="templateId">
		<view
			v-for="(item, index) in goodsList"
			:key="index"
			class="goods-item"
		>
			<uni-goods-row
				:goods="item"
				:routeLink="
					`/pages/common/pages/goods/goodsDetail?goodsId=${item.goodsId}`
				"
				:goodsPrice="item.priceStr.split('.')"
				:priceColor="themeStyles.mainColor"
				:latePrice="item.activity !== 0 && item.priceOut"
			>
				<!-- 商品标签 begin -->
				<template slot="goodsType">
					<view
						v-if="item.activityName"
						:style="{
							'border-color': themeStyles.adronmentColor,
							color: themeStyles.adronmentColor
						}"
						class="goods-tag"
					>
						{{ item.activityName }}
					</view>
				</template>
				<!-- 商品标签 end -->
			</uni-goods-row>
		</view>
	</view>
</template>

<script>
import uniGoodsRow from "@/components/goods/uniGoodsRow";
export default {
	components: {
		uniGoodsRow
	},
	props: {
		goodsList: {
			type: Array,
			default() {
				return [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.uni-goods-list-row {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	.goods-item {
		margin-bottom: 20rpx;

		.goods-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			height: 30rpx;
			border-radius: 4rpx;
			border: 2rpx solid;
			overflow: hidden;
			font-size: 20rpx;
		}

		.goods-num {
			font-size: $theme-size-small-base;
			color: $theme-color-ghost-base;
		}
	}
}
</style>